<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!--顶部按钮-->
<div style="width: 100%;height: 50px;background: #F4F4F4;vertical-align: middle;line-height: 50px;">
    <button id="add_operate" style="margin-left: 12px;">新增</button>
    <button id="del_all">删除</button>
</div>
<div style="height:500px;background: white;margin: 0 auto;overflow-y:scroll;padding-bottom: 15px;margin-left: 12px;margin-right: 12px;">
    <!--阴影效果-->
    <div style="width: 100%;height: 5px;background: #E7EBED;"></div>
    <!--表格部分-->
    <table>
        <thead>
        <th><input type="checkbox" id="allAndNotAll" /> 商品编号</th>
        <th>商品名称</th>
        <th>商品图片</th>
        <th>商品类型</th>
        <th>商品价格</th>
        <th>商品描述</th>
        <th>新增时间</th>
        <th>更新时间</th>
        <th>操作</th>
        </thead>
        <tbody id="t_body">
        <!-- <tr id="1">
            <td><input type="checkbox" /> SP110000</td>
            <td>新潮女装</td>
            <td>
                <img src="img/benchi.jpg" style="width: 45px;height: 45px;"/>
            </td>
            <td>女装</td>
            <td>1234.34</td>
            <td>思考多久撒旦教了三单新潮女装</td>
            <td>2019-04-18</td>
            <td>无</td>
            <td>
                <div style="position: relative;">
                    <font>编辑</font>
                    <font>|</font>
                    <font onclick="show_dialog(this)" value="1">删除</font>
                </div>
            </td>
        </tr> -->
        </tbody>
    </table>
    <!--底部分页部分-->
    <div style="width: 100%;height: 50px;line-height: 50px;text-align: right;">
        <button>上一页</button>
        <button id="next_btn" style="margin-right: 12px;">下一页</button>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    //调用获取商品列表方法
    getGoodsList();

    function getGoodsList() {
        $.ajax({
            url: "http://localhost:8080/university/goods/queryAll",
            type: "GET",
            data: null,
            dataType: "json",
            success: function(ret) {
                console.log(JSON.stringify(ret));
                if(ret.status == "1") {
                    showGoodsList(ret.data);
                }
            }
        });
    }

    function showGoodsList(list){
        //添加先清空
        $("#t_body").empty();

        var html = '';
        for (var i = 0; i < list.length; i++) {
            html += '<tr id="'+list[i].id+'">'
                +    '<td>'+list[i].goodsCode+'</td>'
                +    '<td>'+list[i].goodsName+'</td>'
                +    '<td><img src="'+list[i].goodsPicUrl+'" style="width: 45px;height: 45px;"/></td>'
                +    '<td>'+list[i].goodsType+'</td>'
                +    '<td>'+list[i].goodsPrice+'</td>'
                +    '<td>'+list[i].goodsDesc+'</td>'
                +    '<td>'+list[i].insertTime+'</td>';
            if(typeof(list[i].updateTime) == "undefined"){
                html+=    '<td>无</td>';
            }else{
                html+=    '<td>'+list[i].updateTime+'</td>';
            }
            html+='<td>'
                +    '	<div style="position: relative;">'
                +    '		<font onclick="edit_win('+'\''+list[i].id +'\'' +')">编辑</font>'
                +    '		<font>|</font>'
                +    '		<font onclick="show_dialog(this)" value="'+list[i].id+'">删除</font>'
                +    '	</div>'
                +    '</td>'
                +  '</tr>';
        }

        $("#t_body").html(html);

    }
</script>
</html>